<template>
    <div>
        <h1>Vue的基础语法---响应式数据</h1>
        <p>响应式数据,数据变了,视图自动更新</p>
        <p>怎样让数据显示在页面中用的是html模板语言----{{  }}+指令</p>
        <p>{{ num }}</p>
        <p>{{ p }}</p>
        <input type="button" value="num变化" v-on:click="changeNum" />
        <input type="button" value="num变化" @click="changeNum" />
        <input type="button" value="p变化" @click="changeP" />
        
    </div>
</template>

<script setup lang="ts">
//实现响应式数据
import {ref,reactive} from 'vue'
    //通过ref包裹起来的数据就是响应式数据  ref一般适用于基本类型的数据 布尔 数值 字符串
    //v-on 绑定事件 v-on的简写@
    let num=ref(100);
    let p=reactive({
        name:'张三',
        age:20,
        friends:["tom","小狗","小智"]
    })
    //函数
    const changeNum=()=>{
        num.value++;
        console.log(num.value);
        
    }
    const changeP=()=>{
        p.name="小鸟",
        p.age=30
    }
</script>

<style scoped>

</style>